<template>
	<view class="hui b_width">
		<u-navbar leftIconColor="#fff" :autoBack="true" title="押金支付" titleStyle="color:#fff" :placeholder="true" bgColor="#3C7CFF">
		</u-navbar>
		
		
		<u-radio-group v-model="check" size="27" active-color="#F98754">
		<view class="list_box">
			<view class="b_flex_c info_box" v-for="(item,index) in list" :key="index">
				<image class="img" mode="widthFix" :src="item.icon"></image>
				<view>{{item.name}}</view>
				<view class="money">({{item.deposit}}元)</view>
				<view class="radio">
					<u-radio icon-size="26" :name="index"></u-radio>
				</view>
			</view>
		</view>
		</u-radio-group>
		
		
		<view class="b_submit_box" @click="pay">确认支付押金</view>
	</view>
</template>

<script>
	import {deviceDeposit,deviceLease} from "@/require/api.js";
	export default{
		data(){
			return{
				deviceNumber:'',
				list:[],
				params:{materials:'',form:'routine'},
				check:''
			}
		},
		onLoad(data) {
			this.deviceNumber=data.deviceNumber;
			this.getList();
			
		},
		methods:{
			async getList(){
				let {code,data}=await deviceLease({deviceNumber:this.deviceNumber});
				this.list=data.materials;
			},
			async pay(){
				
				if(this.check==='') return this.$project.toast('请选择');
				let item=this.list[this.check];
				this.params.materials=item.mark;
				let {code,data}=await deviceDeposit(this.params);
				
				if(data){
					let _=this;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.data.jsConfig.timeStamp,
						nonceStr: data.data.jsConfig.nonceStr,
						package: data.data.jsConfig.packages,
						signType: data.data.jsConfig.signType,
						paySign: data.data.jsConfig.paySign,
						success: function(res) {
							_.$project.toPath('/pages/lock/msg?money='+item.deposit+'&deviceNumber='+_.deviceNumber);
						},
						fail: function(err) {
						     _.$project.toast('支付取消');
						}
					});
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.list_box{
		box-sizing: border-box;
		padding: 40rpx;
		width: 100%;
	}
	
	.img{
		width: 100rpx;
		margin-right: 20rpx;
	}
	.info_box{
		background-color: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 40rpx;
		color: #252B50;
	}
	.money{
		margin-left: 20rpx;
	}
	
	.radio{
		margin-left: auto;
	}
</style>